<!--
 * @Author: DUST
 * @Date: 2023-06-09 15:11:31
 * @LastEditors: DUST
 * @LastEditTime: 2023-06-09 16:04:22
 * @FilePath: \vite-project\src\components\browseMenu.vue
 * @Description: 
 * undefined
-->
<template>
  <a-drawer
    :placement="placement"
    :maskClosable="true"
    :closable="false"
    :visible="visible"
    @close="onClose"
    class="menuDrawer"
  >
    <a-menu
      mode="inline"
      theme="dark"
      v-model:openKeys="openKey"
      v-model:selectedKeys="selectKey"
    >
      <template v-for="(item, i) of browseRoute" :key="item.meta.key">
        <template v-if="!item.meta?.noShow">
          <template v-if="item.children && item.children.length > 0">
            <a-sub-menu :key="item.meta.key">
              <template #icon>
                <AppstoreOutlined />
              </template>
              <template #title>{{ item.meta.title }}</template>
              <template v-for="(childItem, j) of item.children">
                <a-menu-item
                  v-if="!childItem.meta?.noShow"
                  :key="childItem.meta.key"
                  @click="goChildPath(item, childItem)"
                >
                  {{ childItem.meta.title }}
                </a-menu-item>
              </template>
            </a-sub-menu>
          </template>
          <template v-else>
            <a-menu-item
              :key="item.meta.key"
              @click="goChildPath(item)"
            >
              <template #icon>
                <PieChartOutlined />
              </template>
              <span>{{ item.meta.title }}</span>
            </a-menu-item>
          </template>
        </template>
      </template>
    </a-menu>
  </a-drawer>
</template>

<script lang="ts" setup>
import { PieChartOutlined, AppstoreOutlined } from "@ant-design/icons-vue";
import browseRoute from "@/router/browse";
import { onMounted, onUnmounted, ref } from "vue";
import router from "@/router";
import emitter from "@/eventBus";

const openKey = ref([
  router.currentRoute.value.matched[
    router.currentRoute.value.matched.length - 2
  ].meta.key,
]);
const placement = ref<string>("left");
const selectKey = ref([router.currentRoute.value.meta?.key]);

const goChildPath = (item: any, childItem?: any) => {
  if(childItem) router.push(`${item.path}${childItem.path == '' ? '' : '/' + childItem.path}`)
  else router.push(`${item.path}`)
  emitter.emit("showMenu", false);
}

const visible = ref<boolean>(false);

onMounted(() => {
  //事件总线来接收
  emitter.on("showMenu", (res) => {
    visible.value = res as boolean;
  });
});

onUnmounted(() => {
  // 结束事件
  emitter.off("showMenu", () => ({}));
});

const onClose = () => {
  visible.value = false;
};
</script>

<style lang="less">
.ant-drawer {
  .ant-drawer-wrapper-body {
    background-color: #001529;
  }
}
</style>
